<template>
<!-- 轮播图 -->
  <el-carousel :interval="5000" arrow="always" type="card" height="15vw">
    <el-carousel-item v-for="item in items" :key="item.id">
      <img :src="item.idView" />
    </el-carousel-item>
  </el-carousel>
  <el-divider />
  <div class="common-layout">
    <el-container>
      <el-aside width="400">
        <!-- 系统介绍-->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span style="color: #409EFF"><b>校园OA系统 —— 定义新的工作模式</b></span>
              <el-button class="button" type="text"  @click="flowable">点击进入流程台</el-button>
            </div>
          </template>
          <div ><b>本系统的功能有：</b><br>
            1.发起、审批流程。
            2.查看流程审批进度。
            3.上传共享文件。
            4.公共聊天室。
            5.打卡。
            6.对系统用户和权限的管理。
            7.发布查看公告。
            <br>
            <b>本系统的技术栈：</b><br>
            1.Vue.js<br>
            2.Element-UI<br>
            3.Axios<br>
            4.Spring Boot<br>
            5.Mybatis<br>
            6.Spring Security Oauth2<br>
            7.Spring Cloud<br>
            8.MySQL<br>
            9.Flowable<br>
            10.Docker<br>
            11.Git<br>
            12.Maven<br>
            13.Redis<br>
            14.Pulsar<br>
            15.ElasticSearch<br>
            16.Minio<br>
            ...

          </div>
        </el-card>

      </el-aside>
      <el-main>
        <!-- 项目历程-->
        <el-timeline>
          <el-timeline-item center timestamp="2022/4/8" placement="top">
            <el-card>
              <h4>完成1.0版本的开发</h4>
              <p>WangZe committed 2022/4/15 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item center timestamp="2022/4/5" placement="top">
            <el-card>
              <h4>完成后端接口的开发</h4>
              <p>WangZe committed 2022/4/5 22:44</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item center timestamp="2022/4/4" placement="top">
            <el-card>
              <h4>完成前端界面的开发</h4>
              <p>WangZe committed 2022/4/5 23:36</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item center timestamp="2022/3/1" placement="top">
            <el-card>
              <h4>毕设系统开始开发</h4>
              <p>WangZe create GitHub Repository 2022/3/1 16:26</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>


      </el-main>
    </el-container>
  </div>



</template>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.85;
  line-height: 400px;
  margin: 0;
  text-align: center;
}
img {
  width: auto; height: 100%;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>


<script>
export default {
    name: "Index",
    data(){
      return{
        items:[
          {id:0,idView:'http://www.xttc.edu.cn/atm/1565687937826/20220329085549418.jpg'},
          {id:1,idView:'http://pic.616pic.com/bg_w1180/00/03/72/q8V9P6T8WC.jpg!/fw/1120'},
          {id:2,idView:'http://www.xttc.edu.cn/atm/1565687650997/20190817150800532.jpg'},
        ],
      }
    },
    methods:{
      flowable(){
        this.$router.push('/flowableIndex')
      }
    },

}
</script>
